<template>
  <van-dialog v-model="isShow" title="取消订单" show-cancel-button class="orderCancel" @confirm='confirm' @cancel='cancel'>
    <div class="mb15 title isRequired">取消原因</div>
    <v-select
      class="select"
      v-if="selected != '其他原因'"
      v-model="selected"
      :options="options"
      label="text"
      :reduce="country => country.text"
      index="text"
    />

    <van-field
      v-else
      class="textarea"
      v-model="otherCause"
      rows="2"
      autosize
      border
      type="textarea"
      maxlength="50"
      placeholder="请输入其他取消原因"
      show-word-limit
    />
  </van-dialog>
</template>

<script>
import { orderCancel, getOrderCancelReason } from "@a/order.js";
import { Dialog, Toast } from "vant";
export default {
  data() {
    return {
      options: [
        // {
        //   text: "订单信息错误，我需要重新提交。",
        // },
        // {
        //   text: "计划有变，我不需要了。",
        // },
        // {
        //   text: "其他原因",
        // },
      ],
      isShow: false,
      selected: "订单信息错误，我需要重新提交。",
      otherCause: "",
      order_id: null,
    };
  },
  methods: {
    show(id) {
      this.order_id = id;
      this.isShow = true;
      this.getReason();
    },
    confirm() {
      let params = {
        order_id: this.order_id,
      };
      if (this.selected == "其他原因") {
        if (this.otherCause) {
          params.reason = this.otherCause;
        }
      } else {
        params.reason = this.selected;
      }
      orderCancel(params).then((res) => {
        if (res.code == 200) {
          let message = "已取消订单"
          if (res.data.pay_info.status == 3) message = `已提交取消订单申请，工作人员将在72小时内处理，并为您办理退款，请耐心等待，如有问题请联系: ${process.env.VUE_APP_CONTACT}，联系电话：${process.env.VUE_APP_CONTACT_PHONE}`
          Dialog.alert({
            title: "提示",
            message: message,
          });
          this.cancel()
          this.$router.push("/user/home");
        }
      });
    },
    cancel () {
      this.isShow = false
      this.otherCause = ''
      this.selected = '订单信息错误，我需要重新提交。'
    },
    // 获取取消原因
    getReason() {
      getOrderCancelReason().then((res) => {
        if (res.code == 200) {
          this.options = res.data;
        }
      });
    },
  },
};
</script>

<style lang='less'>
.orderCancel {
  .van-dialog__content {
    padding-top: 20px;
    height: 200px;
  }
  .select {
    width: 90%;
    margin: 0 auto;
  }
  .title {
    width: 90%;
    margin: 0 auto;
  }
  .textarea {
    .van-cell__value {
      border: 1px #ccc solid;
      padding: 10px;
    }
  }
}
</style>